<template>
  <el-table :data="pageInfo.list" border style="font-size: 11px;" :cell-style="{ textAlign: 'center' }"
            :header-cell-style="{ 'text-align': 'center' }">
    <el-table-column prop="id" label="订单编号" />
    <el-table-column label="订单状态" >
      <template #default="scope">
        <el-tag type="primary" v-if="scope.row.status == 0">未支付</el-tag>
        <el-tag type="warning" v-if="scope.row.status == 1">已支付</el-tag>
        <el-tag type="success" v-if="scope.row.status == 2">已发货</el-tag>
        <el-tag type="primary" v-if="scope.row.status == 3">已收货</el-tag>
        <el-tag type="success" v-if="scope.row.status == 4">退货退款</el-tag>
        <el-tag type="success" v-if="scope.row.status == 5">退换货</el-tag>
        <el-tag type="success" v-if="scope.row.status == 6">仅退款</el-tag>
        <el-tag type="success" v-if="scope.row.status == 7">售后</el-tag>
        <el-tag type="success" v-if="scope.row.status == 8">其他</el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="user.username" label="用户名" />
    <el-table-column prop="createTime" label="创建时间" />
    <el-table-column label="快递单号" >
      <template #default="scope">
        <el-tag type="primary" v-if="scope.row.express==null">非快递</el-tag>
        <el-text  v-else>{{scope.row.express}}</el-text>
      </template>
    </el-table-column>
    <el-table-column prop="payType" label="支付方式">
      <template #default="scope">
        <el-tag type="primary" v-if="scope.row.payType == 0">余额宝</el-tag>
        <el-tag type="warning" v-if="scope.row.payType == 1">支付宝</el-tag>
        <el-tag type="success" v-if="scope.row.payType == 2">微信</el-tag>
        <el-tag type="primary" v-if="scope.row.payType == 3">银联</el-tag>
        <el-tag type="success" v-if="scope.row.payType == 4">其他</el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="addr.province" label="省份"/>
    <el-table-column prop="addr.city" label="市"/>
    <el-table-column prop="addr.district" label="县"/>
    <el-table-column prop="addr.street" label="乡、镇、街道"/>
    <el-table-column prop="addr.address" label="详细地址"/>
    <el-table-column label="操作" width="100px">
      <template #default="scope">
        <el-popover placement="right" :width="550" trigger="hover" style="display: flex; align-items: center">
          <el-button v-if="scope.row.status == 1" size="small" type="success" @click="send(scope.row.id)">发货
          </el-button>
          <template #reference>
            <el-button size="small" type="success" @click="table = true" @mouseenter="selectById(scope.row.id)">查看商品</el-button>
          </template>
          <el-table :data="orderList" style="max-height: 400px; overflow: auto;">
            <el-table-column width="150" property="goods.name" label="商品名称" />
            <el-table-column width="100" property="count" label="购买数量" />
            <el-table-column width="100" property="goods.price" label="商品价格" />
            <el-table-column width="100" property="goods.version" label="商品版本" />

          </el-table>
        </el-popover>
      </template>
    </el-table-column>

  </el-table>
  <el-pagination background layout="prev, pager, next" :total="pageInfo.total" :page-size="pageInfo.pageSize"
                 @change="selectByPage"
                 style="margin-top: 15px; display: flex; justify-content: center; align-items: center;"
                 v-model:current-page="pageInfo.pageNum"/>

  <el-drawer
      v-model="table"
      :title="drawerTitle"

      direction="btt"
      size="50%"
  >
    <el-table :data="orderList">
      <el-table-column label="商品图片">
        <template #default="scope">
          <el-popover placement="right" trigger="hover" v-if="scope.row.goods.picList.length>0" >
            <template #reference>
              <el-image style="width: 30px;height: 30px" :src="server + '/goods/pic/' +scope.row.goods.picList[0].url"
                        :fit="fit" @mouseenter="console.log(server + '/goods/pic/' +scope.row.goods.picList[0].url)"/>
            </template>
            <el-image v-for="(pic,index) in scope.row.goods.picList" :key="index" :headers="headers"
                      style="width: 30px;height: 30px ;margin-right: 11px" :src="server + '/goods/pic/' + pic.url"
                      :fit="fit"/>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column property="goods.name" label="商品名称" />
      <el-table-column property="count" label="购买数量" />
      <el-table-column property="goods.count" label="剩余数量" />
      <el-table-column property="goods.color" label="商品颜色" />
      <el-table-column property="goods.dscp" label="商品描述" />
      <el-table-column property="goods.price" label="商品价格" />
      <el-table-column property="goods.version" label="商品版本" />
      <el-table-column  label="商品总价" >
        <template #default="{ row }">
          {{ totalPrice(row) }}
        </template>
      </el-table-column>
    </el-table>
    <div>
      <span style="color: #ff4949;">总价合计: {{ allTotalPrice }}</span>
    </div>
  </el-drawer>
</template>


<script setup>

import orderApi from "@/api/orderApi.js";
import {computed, ref} from "vue";
import {useTokenStore} from "@/stores/token.js";
import {ElMessage} from "element-plus";
const server = ref(import.meta.env.VITE_SERVER_ADDR)
const table = ref(false);
const tokenStore = useTokenStore();
const headers = computed(() => {
  let token = tokenStore.tokenStr;
  return { token }
})
//该商品总价
const totalPrice = (row) => {
  return (row.count * row.goods.price).toFixed(2); // 保留两位小数
};
//总价
const allTotalPrice = computed(() => {
  return orderList.value.reduce((total, item) => {
    return total + (item.count * item.goods.price);
  }, 0).toFixed(2); // 保留两位小数
});
//分页
const pageInfo = ref({
  pageSize: 0,
  pages: 0,
  pageNum: 0
});
//搜索条件
const condition = ref({
  id: null,
  userId: null,
  addrId: null,
  payType:null,
  status:null
})
function selectByPage(pageNum) {
  orderApi.selectByPage(condition.value, pageNum, 5)
      .then(resp => {
        pageInfo.value = resp.data;
      })
}
selectByPage(1);

const orderList = ref([])
const drawerTitle = ref(''); // 抽屉标题
function selectById(id){
  orderApi.selectById(id)
      .then(resp => {
        orderList.value = resp.data.orderDetailList;
        drawerTitle.value = `订单编号: ${resp.data.id}`
      })
}

function send(id) {
  const order = ref({
    id: id
  })
  orderApi.send(order.value)
      .then(resp => {
        if (resp.code == 10000) {
          ElMessage.success(resp.msg)
        } else {
          ElMessage.error(resp.msg)
        }
      })
  selectByPage(1);
}
</script>


<style scoped>

</style>